<template>
  <el-card class="box-card" v-cloak>
    <div style="text-align: left;font-size: 30px;color: #409EFF;width: 900px">{{ head_text }}</div>
    <hr>
    <el-row>
      <el-col :span="3"
              v-for="(question, index) in this.personData.questions"
              :key="index"
              :offset='0'
              style="margin-left:2px;margin-top: 10px;width: 400px;"
      >
        <el-card :body-style="{ padding: '0px' }" class="css_card">
          <div slot="header" class="clearfix">
            <span style="text-align: left;font-size: 20px;color: #409EFF;width: 900px">{{ question.theme }}</span>
            <el-button-group style="float: right; padding: 3px 0">
              <el-button @click="share(question.id)" v-if="flag" size="mini">
                <el-link type="primary" :underline="false">分享</el-link>
              </el-button>
              <el-button @click="recover(question.id)" v-if="!flag" size="mini">恢复</el-button>
            </el-button-group>
          </div>
          <div style="width: 100%;height: 200px;overflow: hidden"
               v-if="is_video_img(question.fileSrc)=='1'"
          >
            <img :src="'http://192.168.200.128:8080/'+question.fileSrc"
                 style="width: 96%;"
            />
          </div>
          <div v-if="is_video_img(question.fileSrc)=='2'"
               style=" width: 100%;height: 200px"
          >
            <video :src="'http://192.168.200.128:8080/'+question.fileSrc"
                   style="width: 96%;height: 100%;
                      object-fit: fill"
                   loop="loop"
                   controls="controls"
            >
            </video>
          </div>
          <div v-if="is_video_img(question.fileSrc)!='2'&&is_video_img(question.fileSrc)!='1'"
               style=" width: 100%;height: 200px">
            <img :src="require('../assets/imgs/img2.png')" style="width: 100%"/>

          </div>
          <el-divider content-position="right">ID:{{ question.id }}</el-divider>
          <el-button-group style="float: right; padding: 3px 0">

            <el-button @click="query(question.id)" v-if="flag" size="mini">
              <el-link type="primary" :underline="false">编辑</el-link>
            </el-button>
            <el-button @click="deleteX(question.id)" v-if="flag" size="mini">
              <el-link type="danger" :underline="false">删除</el-link>
            </el-button>
            <el-button @click="viewData(question.id)" v-if="flag" size="mini">
              <el-link type="success" :underline="false">查看数据</el-link>
            </el-button>

          </el-button-group>
          <br>
          <br>
          <time class="time" v-if="question.overTime!=null">
            结束时间: {{ question.overTime.substring(0, 10) }}
          </time>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: "question_card",
  data() {
    return {
      head_text: '我的问卷',
      flag: true,
      personData: {
        questions: [{}]
      },
    };
  },
  methods: {
    share(paperId) {
      this.$alert(this.$store.state.baseSrc + "answerSheet/" + paperId, '分享链接', {
        confirmButtonText: '复制',
        callback: action => {
          this.$copyText(this.$store.state.baseSrc + "answerSheet/" + paperId);
          this.$message({
            type: 'info',
            message: `复制成功!快去分享吧!`
          });
        }
      })
    },
    //查看数据
    viewData(paperId) {
      this.$router.push("/survey/paperData/" + paperId)
    }
    ,
    //删除数据
    deleteX(paperId) {
      this.$http.delete("question/deleteOne/" + paperId).then(resp => {
        if (resp.flag == true) {
          this.queryData(0);
          this.$notify({
            title: '提示',
            message: '删除成功',
            type: 'success'
          });
        }
      })
    }
    ,
    //恢复
    recover(paperId) {
      this.$http.post("question/recover/" + paperId).then(resp => {
        if (resp.flag == true) {
          this.queryData(1);
          console.log("恢复完成!")
          this.$notify({
            title: '消息',
            message: '恢复成功',
            type: 'success'
          });

        }
      })
    }
    ,
    query(paperId) {
      this.$store.state.paper.id = paperId;
      this.$router.push('/survey/addnew')
    },
    is_video_img(str) {
      if (str == null) return 0;
      let strings = str.split('.');
      let string = strings[strings.length - 1];
      console.log(strings[1]);
      if (string == 'jpg' || string == 'png') {
        return 1;
      }
      if (string == 'mp4') {
        return 2;
      }
    }
    ,
    queryData(state) {
      if (state == 0) {
        this.flag = true;
        /*我的*/
        this.head_text = '我的问卷',
            this.$http.get("question/questions/" + this.$store.state.userId).then(resp => {
              if (resp.flag == true) {
                this.personData.questions = resp.data;
              }
            })
      } else if (state == 1) {
        this.flag = false;
        /*回收站*/
        this.head_text = '回收站',
            this.$http.get("question/deleteQuestions/" + this.$store.state.userId).then(resp => {
              if (resp.flag == true) {
                this.personData.questions = resp.data;
              }
            })
      }
    }
  },
  created() {
    this.$http.get("question/questions/" + this.$store.state.userId).then(resp => {
      if (resp.flag == true) {
        this.personData.questions = resp.data;
      }
    })
  }
}
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.css_card {
  background-color: white;
  border-radius: 5px;
  margin-left: 40px;
  overflow: hidden;
}

.css_card:hover {
  box-shadow: 0px 0px 2px 2px #409EFF;
  transform: scale(1.02)
}

.time {
  float: right;
  margin-right: 20px;
  margin-bottom: 10px;
  color: #F56C6C;
}

</style>